import BScroll from "better-scroll";


/**
 * 设置横向滚动的方法 
 * @param {vue组件实例} that 
 * @param {横向滚动的容器} wrapper 
 * @param {横向滚动的内容区} content 
 * @param {滚动列表项的数目} num 
 * @param {滚动列表项的宽度(单位是rem)} itemWidth 
 */
function betterScrollHorizontal(that, wrapper,content ,num, itemWidth) {
    // 动态 设置内容区的宽度
    content.style.width = num * itemWidth + "rem";
    that.$nextTick(() => {
        //weapper 为template中容器的ref，表示给那个元素来设置滚动
        that.scroll = new BScroll(wrapper, {
            scrollY: false, //关闭纵向滚动
            scrollX: true, // 横向滚动
            startX: 0, //横向滚动的开始位置
            click:true, // 允许click事件
        });
    });
}
// 设置纵向滚动的方法
// 自行完成
//   let betterscrollYHorizontal = function(that,wrapper,content,num, itemWidth) {
//     // 动态 设置内容区的宽度
//    content.style.width = num  * itemWidth + "rem";
//     that.$nextTick(() => {
//       //weapper 为template中容器的ref，表示给那个元素来设置滚动
//       that.scroll = new BScroll(wrapper, {
//         scrollY: true, // 纵向滚动
//         scrollX: false, // 关闭横向滚动
//         scrollY: 0, //纵向滚动的开始位置
//       });
//     });
//   }

export { betterScrollHorizontal }